<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>后台管理中心</title>
    
    <link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" />
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="../css/ie.css" type="text/css" media="screen" />
    <script src="../js/html5.js"></script>
    <![endif]-->
    <script src="../js/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="../js/hideshow.js" type="text/javascript"></script>
    <script src="../js/jquery.tablesorter.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/jquery.equalHeight.js"></script>
    <script src="../lib/vue.js"></script>
    <script src="../lib/axios.js"></script>
<script type="text/javascript">
    setInterval(function() {
        var now = (new Date()).toLocaleString();
        $('.current-time').text(now);
    }, 1000);
</script>
<script type="text/javascript">
    $(document).ready(function() 
        { 
          $(".tablesorter").tablesorter(); 
     } 
    );
    $(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

});
    </script>
    <script type="text/javascript">
    $(function(){
        $('.column').equalHeight();
    });
</script>


</head>


<body>

    <header id="header">
        <hgroup>
            <h1 class="site_title"><a href="#">人力资源管理系统</a></h1>
            <h2 class="section_title"></h2><div class="btn_view_site"><a href="login.html">注销</a></div>
        </hgroup>
    </header> <!-- end of header bar -->
    
    <section id="secondary_bar">
        <div class="user">
            <p id="staff"></p>
            <!-- <a class="logout_user" href="#" title="Logout">Logout</a> -->
        </div>
        <div class="breadcrumbs_container">
            <article class="breadcrumbs"><a href="index.html">系统管理中心</a> <div class="breadcrumb_divider"></div> <a class="current">公告编辑</a></article>
            <div class="current-time"></div>
        </div>
    </section><!-- end of secondary bar -->
    
    <aside id="sidebar" class="column">
    <h3>人员信息管理</h3>
    <ul class="toggle">
        <li class="icn_new_article"><a href="lecadd.html">人员信息录入</a></li>
        <li class="icn_see_onlineUser"><a href="leclist.html">人员信息查看</a></li>
        
    </ul>

        <h3>应聘信息管理</h3>
        <ul class="toggle">
            <li class="icn_new_article"><a href="hireinfo.html">应聘信息录入</a></li>
            <li class="icn_see_onlineUser"><a href="rencaiku.html">应聘信息查看</a></li>
            <li class="icn_categories"><a href="approval.html">应聘信息审核</a></li>
        </ul>

        <h3>公告管理</h3>
        <ul class="toggle">
            <li class="icn_new_article"><a href="notice_add.html">公告添加</a></li>

            <li class="icn_categories"><a href="notice_edit.html">公告编辑</a></li>

            <li class="icn_see_onlineUser"><a href="notice_check.html">公告查看</a></li>



        </ul>
    
    
    
    
    <footer>
        
    </footer>
</aside><!-- end of sidebar -->
    
    
    <section id="main" class="column">

        <div id="app">

            <article class="module width_full">
                <header><h3 class="tabs_involved">公告列表</h3>
                </header>
                <div class="tab_container" >
                    <div id="tab1" class="tab_content" >
                        <table class="tablesorter" cellspacing="0" style="margin:0" >
                            <thead>
                            <tr>

                                <th style="width: 400px">编号</th>

                                <th style="width: 400px">日期</th>
                                <th style="width: 400px">标题</th>
                                <th style="width: 400px">发布者</th>
                                <th style="width: 400px">操作</th>



                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in items">
                                <td >{{item.number}}</td>
                                <td >{{item.date}}</td>
                                <td >{{item.caption}}</td>
                                <td >{{item.publisher}}</td>
                                <td width="10px">
                                    <input type="image" src="../images/icn_edit.png" title="Edit" v-on:click=
                                            "updateBillboard(item.number,item.caption,item.content)">
                                    <input type="image" src="../images/icn_trash.png" title="Trash" v-on:click="deleteBillboard(item.number)">
                                </td>
                                <!-- </tr> -->

                                <!-- <tr> -->

                            </tr>

                            </tbody>
                        </table>
                    </div><!-- end of #tab1 -->

                    <div id="tab2" class="tab_content">

                    </div><!-- end of #tab2 -->

                </div><!-- end of .tab_container -->

            </article><!-- end of content manager article -->
            <div class="spacer"></div>

        </div>

        <script>

            const vm = new Vue({
                el: "#app",
                data: {
                    items: [],
                    totalNum: 0,
                    currentPage: 0,
                    totalPage: 0,
                },
                created: function () {
                    var that = this;
                    axios.get("http://localhost:8080/javaWeb/listbillboard.action").then(function (res) {
                        if (res.data.status === "1002") {
                            that.items = res.data.data;
                            that.totalNum = res.data.totalNumber;
                            //让dom结构渲染完之后在执行下面的goPage()方法
                            // console.log(res.data);
                        } else {
                            console.log("服务器通讯异常。");
                        }
                    }).catch(function (e) {
                        console.log(e);
                    })
                },methods:{

                    deleteBillboard:function (number) {

                        if(confirm("确定删除这条公告?")){

                            axios.get("http://localhost:8080/javaWeb/deletebillboard.action?number=" + number).then(function(res) {
                                if (res.data.status == "1002") {
                                    alert("删除成功");
                                    //此时刷新页面
                                    location.href="notice_edit.html";
                                }
                            }).catch(function(err) {
                                console.log(err);
                            });

                        }else
                        {
                            return;

                        }
                    },

                    updateBillboard:function (number,caption,content) {

                        localStorage.setItem("ud_number",number);
                        localStorage.setItem("ud_caption",caption);
                        localStorage.setItem("ud_content",content);
                        location.href="notice_update.html";

                    }



                    }
            }

            );

        </script>

        <script>

            let staff = document.getElementById("staff");

            $(staff).text(localStorage.getItem("username"));

        </script>

    </section>

</body>

</html>